<html>
<head>
<style>
body {
	text-align:center;
	margin:0px;
	
	
}
#apDiv1 {
	float:left;
	width:550px;
	height:auto;
	background:#f5fbee;
}

#apDiv2 {
	float:left;
	width:550px;
	height:auto;
	padding-top:20px;
	background:#f5fbee;
}
#Div_reser_confirm #apDiv1 table {
	text-align: center;
}
#Div_reser_confirm #apDiv1 table {
	font-size: 12px;
}
#Div_reser_confirm #apDiv1 table {
	font-size: 14px;
}
#Div_reser_confirm #apDiv2 table tr td {
	text-align: center;
	font-family: "ＭＳ Ｐゴシック", "ＭＳ ゴシック", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS UI Gothic";
	font-size: 14px;
}
#apDiv3 {
	float:left;
	width:550px;
	height:29px;
	padding-top:10px;
	background:#f5fbee;
	z-index:auto;
}
#apDiv3 image {
	border:none;
}
</style>

</head>
<body>
<!--{include common_head}-->
<div id="Div_reser_confirm">
<div id="apDiv1">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>日付選択</td>
    <td>店舗選択</td>
    <td>サービス選択</td>
  </tr>
  <tr>
  <form action="/index.php" method="get">
    <td><input type="text" name="search_date" value="{$year}-${sprintf("%02d",$month)}-${sprintf("%02d",$day)}" onfocus="WdatePicker({lang:'jp', minDate:'${date('Y-m-d')}'})" class="Wdate"/></td>
    <td><select name="shop_id" class="f-city">
      <option value="0">選択してください</option>
      
				${Utility::Option(Utility::OptionArray($shopList, 'id', 'shop_name'), $defaultShopId)}
			
    </select></td>
    <td><select name="service_id" class="f-city">
      <option value="0">選択してください</option>
      
				${Utility::Option(Utility::OptionArray($serviceList, 'id', 'service_name'), $serviceId)}
			
    </select></td>
  
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="search"/></td>
    <td>&nbsp;</td>
    </form>
  </tr>
  
</table>
</div>

<div id="apDiv2">
<table width="550" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td colspan="4"><font color="#FF0000" size="+1" style="font-weight:bold">{$service['service_name']}</font>予約可能な時間帯は下記となります。</td>
    </tr>
  <tr>
      <!--{if $forenoonTime==null}-->
      <td width="88">午前予約ある</td>
      <!--{/if}-->
      <!--{if $forenoonTime!=null}-->
      <td width="88">午前：${date("Y年m月d日 H:i", $forenoonTime['start'])}<!--～${date("H:i", $forenoonTime['end'])} --></td>
      <!--{/if}-->
      
      <!--{if $afternoonTime==null}-->
      <td width="88">午後予約ある</td>
      <!--{/if}-->
      <!--{if $afternoonTime!=null}-->
      <td width="88">午後：${date("Y年m月d日 H:i", $afternoonTime['start'])}<!--～${date("H:i", $afternoonTime['end'])} --></td>
      <!--{/if}-->
      
      <!--{if $eveningTime==null}-->
      <td width="88">夜予約ある</td>
      <!--{/if}-->
      <!--{if $eveningTime!=null}-->
      <td width="88">夜：${date("Y年m月d日 H:i", $eveningTime['start'])}<!--～${date("H:i", $eveningTime['end'])} --></td>
      <!--{/if}-->
     
  </tr>

</table>
</div>
<div id="apDiv3">
<a href="/preengage.php">
      		<img src="/static/images/bt_yoyaku_on.gif" width="91" height="29" alt="予約する" />
      	</a>

</div>

</div>
<!-- End Save for Web Slices -->
</body>
<script type="text/javascript">
jQuery(function(){
	$("select[name='shop_id']").bind("change", function(){
		if( $(this).val() < 1 ){
			return ;
		}
		$.get("{$webRoot}/ajax/GetServiceList.php", "shopId=" + $(this).val(), function(data){
			var options = '<option value="0">選択してください</option>';
			for(var index in data.data){
				if( !index ){
					continue;
				}
				options = options + '<option value="' + index + '">' + data.data[index].service_name + '</option>';
			}
			$("select[name='service_id']").html(options);
		}, "json");
		
	});
});
</script>
</html>